import { useEffect, useState, useMemo } from 'react';
import { search } from 'api/logs';
import { getLogs } from 'api/dictionary';
import { Table, Form } from 'com';
import menuStore from 'store/menu';
import dayjs from 'dayjs';

/**
 * 列
 */
const cols = [
    {
        title: '日志内容',
        dataIndex: 'message',
    },
    {
        title: '日志类型',
        align: 'center',
        width: 130,
        dataIndex: 'type'
    },
    {
        title: '日期',
        align: 'center',
        dataIndex: 'date',
        width: 180,
        render: text => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
    }
]

export default () => {
    /**
     * 搜索对象
     */
    const [searchModel, setSearchModel] = useState({
        type: 0,
        pageNo: 1,
        pageSize: 10
    });
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 总条数
     */
    const [total, setTotal] = useState(0);
    /**
     * 日志列表
     */
    const [list, setList] = useState([]);
    /**
     * 日志类型
     */
    const [logTypes, setLogTypes] = useState([
        { label: '所有', value: 0 }
    ]);
    /**
     * 搜索
     */
    const options = useMemo(() => ({
        type: {
            title: "日志类型",
            tag: 'select',
            style: { width: 120 },
            values: logTypes
        },
        startDate: {
            title: '开始时间',
            tag: 'date',
        },
        endDate: {
            title: '结束时间',
            tag: 'date'
        },
        button: {
            tag: 'button',
            type: 'primary',
            htmlType: 'submit',
            text: '搜索',
            loading
        }
    }), [logTypes, loading]);

    menuStore.auth('logsList') && useEffect(() => {
        (async () => {
            try {
                const list = await getLogs();
                setLogTypes([...logTypes, ...list.map(c => ({ label: c.name, value: c.id }))]);
            } catch (error) { }
        })()
    }, []);

    menuStore.auth('logsList') && useEffect(() => {
        const getList = async () => {
            setLoading(true);
            try {
                const model = { ...searchModel };
                if (model.startDate) {
                    model.startDate = dayjs(model.startDate).format('YYYY-MM-DD');
                }
                else {
                    delete model.startDate;
                }
                if (model.endDate) {
                    model.endDate = dayjs(model.endDate).format('YYYY-MM-DD');
                }
                else {
                    delete model.endDate
                }
                const { data, total } = await search(model);
                setList(data);
                setTotal(total);
            } catch (error) { }
            setLoading(false);
        }
        getList();
    }, [searchModel]);

    return <div>
        <h3>日志管理</h3>
        <hr />
        {menuStore.auth('logsList') && <Form onFinish={values => setSearchModel({ ...searchModel, ...values, pageNo: 1 })} values={searchModel} options={options} attrs={{ layout: 'inline' }}></Form>}
        <p></p>
        {menuStore.auth('logsList') && <Table cols={cols} data={list} loading={loading} total={total} page={searchModel} onChange={setSearchModel}></Table>}
    </div>
}